<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>滁州学院迎新系统</title>
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<script type="text/javascript" src="js/jquery.js"></script>
	<script src="js/bootstrap.min.js"></script>

</head>
<body>
	
	<!-- ----------------------页头--------------------------------- -->
	<div class="col-md-12" style="background:#32B7AB;">
		<h1><span style="color:white;">滁州学院迎新系统</span></h1>
	</div>
	<!-- ----------------------页头END--------------------------------- -->


	<!-- ----------------------------左侧选项--------------------------- -->
	<div class="col-md-3" style="background:white;height:100%;">
			<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">

			  <div class="panel panel-default">
			    <div class="panel-heading" role="tab" id="headingOne">
			      <h4 class="panel-title">
			        <button class="list-group-item " style="background:#32B7AB;" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
			          <span style="color:white;">新生基本信息</span>
			        </button>
			      </h4>
			    </div>
			    <div id="collapseOne" class="panel-collapse collapse " role="tabpanel" aria-labelledby="headingOne">
			      <div class="panel-body">
			        <button id="xxck"  class="list-group-item">个人信息查看</button>
			        <button id="xxxg" class="list-group-item">个人信息修改</button>
			      </div>
			    </div>
			  </div>
			

			  <div class="panel panel-default">
			    <div class="panel-heading" role="tab" id="headingOne">
			      <h4 class="panel-title">
			        <button id="bdlc" class="list-group-item " style="background:#32B7AB;" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
			          <span style="color:white;">报道流程完成情况</span>
			        </button>
			      </h4>
			    </div>
			  </div>

			  <div class="panel panel-default">
			    <div class="panel-heading" role="tab" id="headingOne">
			      <h4 class="panel-title">
			        <button id="jfqk" class="list-group-item " style="background:#32B7AB;" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="true" aria-controls="collapseThree">
			          <span style="color:white;">缴费情况查询</span>
			        </button>
			      </h4>
			    </div>
			  </div>

			   <div class="panel panel-default">
			    <div class="panel-heading" role="tab" id="headingOne">
			      <h4 class="panel-title">
			        <button class="list-group-item " style="background:#32B7AB;" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFive" aria-expanded="true" aria-controls="collapseFive">
			          <span style="color:white;">服务</span>
			        </button>
			      </h4>
			    </div>

			    <div id="collapseFive" class="panel-collapse collapse " role="tabpanel" aria-labelledby="headingOne">
			      <div class="panel-body">
			        <button id="wtzx"  class="list-group-item">问题咨询</button>
			        <button id="lyb" class="list-group-item">留言板</button>
			      </div>
			    </div>
			  </div>

			</div>
		</div>
	    <!-- -------------------------------左侧选项END------------------------------------------------  -->
		

		<!-- -----------------------------------右侧内容------------------------------------------------ -->
		
		<!-- ---------------个人信息查看- xxck_c ------------------------------------ -->
		<div class="col-md-offset-3" style="background:#32B7AB;">
			
			<div id="xxck_c"  class="col-md-12 t" style="height:1071px; display:none;" >
				<div class="list-group">
					<button class="list-group-item " style="background:#32B7AB;">个人基本信息</button>
					<div  class="list-group-item">
						<tr>
							<h1>学生基本信息</h1>
							<td><h2>姓名：任志伟</h2></td>
							<td><h2>年龄：20</h2></td>
							<td><h2>性别：男</h2></td>
							<td><h2>籍贯：安徽</h2></td>
							<td><h2>手机号码：123456789</h2></td>
							<td><h2>邮箱：123456789@qq.com</h2></td>
						</tr>
						<hr>
						<br>

						<tr>
							<h1>班级信息</h1>
							<td><h2>专业：物联网</h2></td>
							<td><h2>班级：物联网二班</h2></td>
							<td><h2>班主任：xxx</h2></td>
						</tr>
						<hr>
						<br>

						<tr>

						</tr>
					</div>
				</div>
			
			</div>
			
		</div>


		<!-- ---------------个人信息修改- xxxg_c ------------------------------------ -->
		<div class="col-md-offset-3" style="background:#32B7AB;">
			
			<div id="xxxg_c"  class="col-md-12 t" style="height:1071px; display:none;" >
				<div class="list-group">
					<button class="list-group-item " style="background:#32B7AB;">个人信息修改</button>
					
					<div  class="list-group-item">
						<form action="">
							<tr>
								<h1>学生基本信息</h1>
								<td><h2>姓名：任志伟</h2></td>
								<td><h2>年龄：20</h2></td>
								<td><h2>性别：男</h2></td>
							</tr>
							<hr>
							<br>

							<tr>
								<h1>班级信息</h1>
								<br>
								<td><h2>专业：物联网工程</h2></td>
								<td><h2>班级：二班</h2></td>
								<td><h2>班主任：xxx</h2></td>
							</tr>
							<hr>
							<br>
							<tr>
								<td><h2>手机号码：123456789</h2></td><td>修改：<input type="text"></td>
								<br>
								<td><h2>邮箱：123456789@qq.com</h2></td><td>修改：<input type="text"></td>
							</tr>
							<hr>
							<br>
							<tr>
								<td><h2>密码修改：<input type="text"></h2></td>
							</tr>
							<hr>
							<center><button type="submit" style="width:300px;height:30px;background:#47C8C1;">提交</button></center>
						</form>
					</div>

				</div>
			</div>
		</div>


		<!------------------------  报道流程完成情况-bdlc_c  ------------------------------- -->
		<div class="col-md-offset-3" style="background:#32B7AB;">
			
			<div id="bdlc_c"  class="col-md-12 t" style="height:1071px; display:none;" >
				<div class="list-group">
					<button class="list-group-item " style="background:#32B7AB;">报道流程完成情况</button>
					
					<div  class="list-group-item">
						<table border="1" width="974px;">
							<thead>
								<tr>
									<td><h2>项目</h2></td>
									<td><h2>完成情况</h2><td>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td><h3>新生身份验证</h3></td>
									<br>
									<td><h3>完成</h3></td>
								</tr>
								<tr>
									<td><h3>个人学费和学杂费缴费</h3></td>
									<td><h3>完成</h3></td>
								</tr>
								<tr>
									<td><h3>个人一卡通办理</h3></td>
									<td><h3>完成</h3></td>
								</tr>
								<tr>
									<td><h3>个人代购物品</h3></td>
									<td><h3>完成</h3></td>
								</tr>

							</tbody>

						</table>
					</div>

				</div>
			</div>
		</div>
	
		
		<!------------------------  缴费情况查询-jfqk_c  ------------------------------- -->
		<div class="col-md-offset-3" style="background:#32B7AB;">
			
			<div id="jfqk_c"  class="col-md-12 t" style="height:1071px; display:none;" >
				<div class="list-group">
					<button class="list-group-item " style="background:#32B7AB;">报道流程完成情况</button>
					
					<div  class="list-group-item">
						<table border="1" width="974px;">
							<thead>
								<tr>
									<td><h2>收费项目</h2></td>
									<td><h2>应收金额</h2></td>
									<td><h2>已缴金额</h2></td>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td><h3>学费</h3></td>
									<td><h3>5000</h3></td>
									<td><h3>0.0</h3></td>
								</tr>
								<tr>
									<td><h3>住宿费</h3></td>
									<td><h3>5000</h3></td>
									<td><h3>0.0</h3></td>
								</tr>
								<tr>
									<td><h3>教材讲义费</h3></td>
									<td><h3>5000</h3></td>
									<td><h3>0.0</h3></td>
								</tr>
								<tr>
									<td><h3>保险费</h3></td>
									<td><h3>5000</h3></td>
									<td><h3>0.0</h3></td>
								</tr>
								<tr>
									<td><h3>合计</h3></td>
									<td><h3>5000</h3></td>
									<td><h3>0.0</h3></td>
								</tr>

							</tbody>

						</table>
					</div>

				</div>
			</div>
		</div>
		
		
		
		<!------------------------  问题咨询-wtzx_c  ------------------------------- -->
		<div class="col-md-offset-3" style="background:#32B7AB;">
			
			<div id="wtzx_c"  class="col-md-12 t" style="height:1071px; display:none;" >
				<div class="list-group">
					<button class="list-group-item " style="background:#32B7AB;">问题咨询</button>
					<button type="button" class="btn  btn-lg col-md-offset-9"  style="background:#32B7AB;" data-toggle="modal" data-target="#questions">
					  提问
					</button>
					<div  class="list-group-item">

						<table border="1" width="974px;">
							<thead>
								<tr>
									<td>
										<h2>问题</h2>

									</td>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td>
										<!-- 弹框按钮，data-target对应相应的弹框div -->
										<button type="button" class="btn  btn-lg"  style="color:#43C9BD;" data-toggle="modal" data-target="#myModal">
										  学校什么时候开学？
										</button>
									</td>
								</tr>
								<tr>
									<td>
										<!-- 弹框按钮，data-target对应相应的弹框div -->
										<button type="button" class="btn  btn-lg"  style="color:#43C9BD;" data-toggle="modal" data-target="#myModal">
										  学校什么时候开学？
										</button>
									</td>
								</tr>
								<tr>
									<td>
										<!-- 弹框按钮，data-target对应相应的弹框div -->
										<button type="button" class="btn  btn-lg"  style="color:#43C9BD;" data-toggle="modal" data-target="#myModal">
										  学校什么时候开学？
										</button>
									</td>
								</tr>
								<tr>
									<td>
										<!-- 弹框按钮，data-target对应相应的弹框div -->
										<button type="button" class="btn  btn-lg"  style="color:#43C9BD;" data-toggle="modal" data-target="#myModal">
										  学校什么时候开学？
										</button>
									</td>
								</tr>
								<tr>
									<td>
										<!-- 弹框按钮，data-target对应相应的弹框div -->
										<button type="button" class="btn  btn-lg"  style="color:#43C9BD;" data-toggle="modal" data-target="#myModal">
										  学校什么时候开学？
										</button>
									</td>
								</tr>
							</tbody>

						</table>

						<ul class="nav nav-pills nav-stacked">
							 	
						</ul>
					</div>

				</div>
			</div>
		</div>



		<!-- ---------------------弹出框内容------------------------------ -->
		<!-- Modal -->
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
		  <div class="modal-dialog" role="document">
		    <div class="modal-content">
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
		        <h4 class="modal-title" id="myModalLabel">学校什么时候开学？</h4>
		      </div>
		      <div class="modal-body">
		            科幻作品中经常出现的硅基生命，可能在面世的道路上探出了一点头。科研人员首次培养出了一种可以生成含硅碳
		        氢化合物的细菌。
		        　　地球上迄今已知的生命都是碳基的，碳元素是构成人类身体的基石。在元素周期表中，硅元素与碳元素同族，许多性质相似，因此科幻作品中常有对硅基生命的畅想。但尽管地壳中的硅元素含量高达28%，远超出碳元素的0.03%，地球上还是没有演化出硅基生命。
		        　　现在科学家向这个方向迈进了一小步。据美国《科学》杂志网站报道，在最近美国化学学会举行的会议上，加州理工学院的弗朗西斯·阿诺德等人报告说，他们培养出了一种可以生成含硅碳氢化合物的细菌。
		        　　这是一种嗜热细菌，通常生活在温泉等处。研究人员发现，它们偶尔会将硅元素加入到碳氢化合物中，即用硅原子替换某些地方的碳原子。由于这种情况天然出现的几率很低，研究人员对它们进行了有选择性的人工培养，最后得到的细菌生成含硅的碳氢化合物的产率提高了2000倍。
		        　　工业上其实早已能用化学方法合成含硅的碳氢化合物，它们被称作有机硅，用于生产粘合剂、防漏剂等领域。这些有机硅产品中的分子链很长，而相关细菌生成的含硅的碳氢化合物的分子链还很短，尚不能用于上述领域。但研究人员表示，如果进一步改进后的细菌产物能达到相关标准，那么将有望使用这种生物方法大幅降低相关工业产品的成本。
		        　　另外，这也说明生命体可以生成含硅的复杂材料，可能是一条通向硅基生命的道路。虽然一些科研人员不同意有硅基生命存在的可能性，本次研究也还只是很小的一步，但阿诺德仍然表示：“现在，我们有了赋予硅生命的机会。”
		        　　关于硅基生命的另一条道路是人工智能，因为计算机使用硅芯片，许多人认为建立在此基础上的人工智能可说是硅基智能，像科幻作品中那样发展到某种程度后便可称之为硅基生命。最近人工智能程序“阿尔法围棋”战胜韩国棋手李世石，引发大量对人工智能的讨论。硅基智能和从细菌起步的硅基生物体在遥远的未来能以某种方式融合吗?新成果引发人们的遐想。
		      </div>
		      <div class="modal-footer">
		        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
		      </div>
		    </div>
		  </div>
		</div>


		<div class="modal fade" id="questions" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
		  <div class="modal-dialog" role="document">
		    <div class="modal-content">
		    <form action="">
			      <div class="modal-header">
			        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
			        <h4 class="modal-title" id="myModalLabel">问题标题：<input name="question" type="text"></h4>
			      </div>
			      <div class="modal-body">
			        <textarea name="content" id="" cols="30" rows="10" class="col-md-12"></textarea>
			      </div>
			      <div class="modal-footer">
			      	<button type="submit" class="btn btn-primary">提交</button>
			        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
			      </div>
		    </form>
		    </div>
		  </div>
		</div>
	

		<!------------------------  留言板-lyb_c  ------------------------------- -->
		<div class="col-md-offset-3" style="background:#32B7AB;">
			
			<div id="lyb_c"  class="col-md-12 t" style="height:1071px; display:none;" >
				<div class="list-group">
					<button class="list-group-item " style="background:#32B7AB;">留言板</button>
					
					<div  class="list-group-item">
						<form action="">
							<h1>你的留言<span style="font-size:15px;">（留下你对我们系统功能的建议）</span></h1>
							<textarea name="liuyan" id="" cols="30" rows="10" class="col-md-12"></textarea>
							<button type="submit" class="btn btn-primary col-md-offset-3" style="width:500px;">提交</button>
						</form>
					</div>

				</div>
			</div>
		</div>

		

		






		<!-- -----------------------------------右侧内容END------------------------------------------------ -->



		<!-- ------------------------------左栏点击事件--------------------------------- -->
			<script>
			
				//右边页面切换
				$(function(){
					$("#xxck").click(function(){
						$(".t").hide();
						$("#xxck_c").toggle(1000);
					})	

					$("#xxxg").click(function(){
						$(".t").hide();
						$("#xxxg_c").toggle(1000);
					})

					$("#bdlc").click(function(){
						$(".t").hide();
						$("#bdlc_c").toggle(1000);
					})

					$("#jfqk").click(function(){
						$(".t").hide();
						$("#jfqk_c").toggle(1000);
					})

					$("#wtzx").click(function(){
						$(".t").hide();
						$("#wtzx_c").toggle(1000);
					})
					
					$("#lyb").click(function(){
						$(".t").hide();
						$("#lyb_c").toggle(1000);
					})
				})
			</script>
		<!-- ------------------------------左栏点击事件  END--------------------------------- -->
		


		<!-- ======================== 点击咨询问题弹窗======================================== -->
	
		<script>
			$(function () {
			  $('[data-toggle="popover"]').popover()
			})
		</script>

</body>
</html>